<template>
  <div>
    <div class="home_content">
        <Load :scrollTop='scrollTop' :overlay='overlay'></Load>
        <Head :headScrollTop='headScrollTop'></Head>
      <ArticleCard :CardTitleInfo='CardTitleInfo'></ArticleCard>
      <div class="pagination">
           <v-pagination
           v-model="pageValue"
          :length="TotalNum"
          circle
          @next="next(pageValue)"
          @previous="previous(pageValue)"
          color="#bcbc"
          :value="1"
          ></v-pagination>
      </div>
      <Footer></Footer>
      </div>
    </div>
</template>
<script>
import Head from './components/head.vue'
import Footer from './components/Footer.vue'
import Load from './components/Load.vue'
import ArticleCard from '../Article/components/articleCard.vue'
// import { mapGetters } from 'vuex';
import { login, ArticleList, totalNum } from '../../../api/api.js'
export default {

  data () {
    return {
      headScrollTop: 0,
      pageValue: 0, //当前选择页
      page: 1,
      CardTitleInfo: [],
      PageSize: 10,
      PageNum: 1,
      TotalNum: 0,  // 总条数
      scrollTop: 0,
      overlay: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  computed: {
    cloudApp () {
      const cloudApp = this.$store.getters.getCloudApp;
      return cloudApp
    }
  },
  methods: {
    scrollToTop () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop);
      let style = {
        position: 'absolute',
        top: '' + scrollTop + 'px',
        right: '50%',
      }
      this.scrollTop = style;
      this.headScrollTop = scrollTop;
    },
    beforeRouteLeave (to, form, next) {
      window.removeEventListener('scroll', this.scrollToTop);
      next();
    },
    async next (pageValue) {
      console.log("下一页", pageValue);
      await this.getArticleList(pageValue);

    },
    async previous (pageValue) {
      console.log("上一页", pageValue);
      await this.getArticleList(pageValue);
    },
    async getTotalNum () {
      await totalNum().then(res => {
        console.log("总条数：", res.result.total);
        // 向上取整  Math.ceil
        this.TotalNum = Math.ceil(res.result.total / 10)
        console.log("页数应该是：", this.TotalNum);
      })
    },
    PageArticleList (data) {
      console.log(data);
      this.CardTitleInfo = [...this.CardTitleInfo, ...data]
    },
    async getArticleList (pageValue) {
      this.overlay = !this.overlay;
      console.log("pageValue");
      pageValue = pageValue == null || pageValue == 0 ? 1 : pageValue;
      await ArticleList(this.PageSize, pageValue).then(res => {
        console.log(res.result.data);
        this.CardTitleInfo = res.result.data
        this.overlay = !this.overlay;
      });
    },
    async login () {
      await login();
    }
  },
  async created () {
    await this.login();
    await this.getArticleList();
    await this.getTotalNum();
  },
  components: {
    Head,
    ArticleCard,
    Footer,
    Load
  }
}
</script>
<style lang="less">
.home_content {
  position: relative;
  .pagination {
    background-color: hsla(120, 14%, 77%, 0.3);
    width: 380px;
    height: 50px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>